<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>幻灯片</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/lib/jquery/1.9.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="/icheck-1.x/icheck.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <link href="/icheck-1.x/skins/all.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>

<div class="container-fluid" style="margin:25px 50px">
    <div class="row">
        <div class="col-sm-2">
            <a class="btn btn-primary" href="{:url('add')}"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加幻灯片</a>
        </div>
        <form class="col-sm-10"action="{:url('search')}" method="post">
            <div class="row">
                <div class="form-inline col-sm-12 col-sm-offset-7">
                    <select class="form-control col-sm-3" name="enabled">
                        <option selected>状态</option>
                        <option value="1">显示</option>
                        <option value="0">隐藏</option>
                    </select>
                    <input type="text" class="form-control col-sm-8" id="exampleInputEmail2" name="content" placeholder="">
                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>搜索</button>
                </div>
            </div>
        </form>
    </div>
</div>

<hr>
<div class="btn-toolbar" style="margin-bottom: 10px;margin-left: 50px;margin-right: 50px">
    <div class="btn-group" style="background: white">
        <div class="btn btn-default" style="background: white">&emsp;<input type='checkbox' class="all" style="width:15px;height:15px" data="0" value=""/>&emsp;</div>
    </div>
    <div class="btn-group">
        <button class="btn btn-default showAll"><span class="glyphicon glyphicon-eye-open"></span>显示</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default hideAll"><span class="glyphicon glyphicon-eye-close"></span>隐藏</button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default delAll"><span class="glyphicon glyphicon-trash"></span>删除</button>
    </div>
</div>

<div style="margin-left: 50px;margin-right: 50px">
    <table class="table table-hover" style="">
        <tr>

        </tr>
        <tr>
            <th>  </th>
            <th>顺序</th>
            <th>标题</th>
            <th>链接</th>
            <th>显示</th>
            <th>操作</th>
        </tr>
        {foreach $item as $key=>$value}
        <tr>
            <td>
                <div style="margin-left: 25px">
                    <input type='checkbox'  value="{$value.id}">
                </div>
            </td>
            <td>{$value.displayorder}</td>
            <td>{$value.advname}</td>
            <td>{$value.link}</td>
            {if $value.enabled == 0}
            <td><button class="btn btn-default btn-sm hideOne" data-id="{$value.id}" data-enabled="{$value.enabled}">隐藏</button></td>
            {else /}
            <td><button class="btn btn-primary btn-sm showOne" data-id="{$value.id}" data-enabled="{$value.enabled}">显示</button></td>
            {/if}
            <td>
                <a href="{:url('edit')}?id={$value.id}">修改</a>
                <a href="{:url('delete')}?id={$value.id}">删除</a>
            </td>
        </tr>
        {/foreach}
    </table>
</div>


<div>{php}echo $page{/php}</div>
<hr>
<script>
    $('input').iCheck({
        labelHover : false,
        cursor : true,
        checkboxClass : 'icheckbox_square-blue',
        radioClass : 'iradio_square-blue',
        increaseArea : '20%'
    });


    $(".all").on("ifChanged",function (e) {
        data=parseInt($(this).attr("data"));
        if(!data){
            $(this).attr("data",1);
            $("input[type=checkbox]").each(function (index) {
                $(this).iCheck("check");
            });
        }else{
            $(this).attr("data",0);
            $("input[type=checkbox]").each(function (index) {
                $(this).iCheck("uncheck");
            });
        }

    });

    $(".showAll").on("click",function (e) {
        valueArr=[];
        $("input[type=checkbox]:checked").val(function (index, value) {
            if(value==""){
                return false;
            }
            obj={
                "id":value,
                "enabled":1,
                "uniacid":1
            }
            valueArr.push(obj);
        });
        $.ajax({
            url:"{:url('enabled')}",
            type:"post",
            data:{
                "data" :valueArr
            },
            success:function (res) {
                if(res.code==200){
                    self.location.href="{:url('page')}";
                }else{

                }
            }
        });
    });

    $(".hideAll").on("click",function (e) {
        valueArr=[];
        $("input[type=checkbox]:checked").val(function (index, value) {
            if(value==""){
                return false;
            }
            obj={
                "id":value,
                "enabled":0
            }
            valueArr.push(obj);

        });
        $.ajax({
            url:"{:url('enabled')}",
            type:"post",
            data:{
                "data" :valueArr
            },
            success:function (res) {
                if(res.code==200){
                    self.location.href="{:url('page')}";
                }else{

                }
            }
        });
    });

    $(".delAll").on("click",function (e) {
        valueArr=[];
        $("input[type=checkbox]:checked").val(function (index, value) {
            if(value==""){
                return false;
            }
            obj={
                "id":value,
                "iswxapp":1
            }
            valueArr.push(obj);
        });
        $.ajax({
            url:"{:url('delete')}",
            type:"post",
            data:{
                "data" :valueArr,
            },
            success:function (res) {
                if(res.code==200){
                    self.location.href="{:url('page')}";
                }else{

                }
            }
        });
    });

    $(".showOne").on("click",function (e) {
        id=$(this).attr("data-id");
        enabled=parseInt($(this).attr("data-enabled"));
        console.log(id,enabled);
        $.ajax({
            url:"{:url('enabled')}",
            type:"post",
            data: {
                "id":id,
                "enabled":0
            },
           success:function (res) {
               if(res.code==200){
                   self.location.href="{:url('page')}";
               }else{

               }
           }
        });
    });

    $(".hideOne").on("click",function (e) {
        id=$(this).attr("data-id");
        enabled=parseInt($(this).attr("data-enabled"));
        $.ajax({
            url:"{:url('enabled')}",
            type:"post",
            data: {
                "id":id,
                "enabled":1
            },
            success:function (res) {
                if(res.code==200){
                    self.location.href="{:url('page')}";
                }else{

                }
            }
        });
    });

    $(function (e) {
        var vm=new Vue({
            el:"#vue",
            data:{
                "title":"hello"
            },
            methods:{
                say:function (a){
                    return a;
                }
            }
        });
    });

</script>
</body>
</html>